<style>
body {
  font: Helvetica, sans-serif;
  color: #999;
}
.logo {
  width: 40px;
  height: 40px;
}
</style>

<template>
  <div>
    <!-- <h1>{{msg}}</h1> -->
    	<div class="m-index">
            <div class="m-index-notice">
                <div class="notice-icon">&nbsp;&nbsp;&nbsp;&nbsp;</div>
                <div id="demo" class="notice-text-info">
                    <div class="qimo" style="left: 20px;">
                        <ul id="notice-text-content-id">
                           {{noticeTip}}
                        </ul>
                    </div>
                </div>
            </div>
            <div class="m-index-banner">
                <div class="mint-swipe" style="height: 2.75rem; text-align: center;">
                    <div class="mint-swipe-items-wrap">
                        <div class="mint-swipe-item" style=""><img src="http://image.comingcard.com/banner/banner-happy.png" height="100%" width="100%"></div>
                        <div class="mint-swipe-item is-active" style=""><img src="http://image.comingcard.com/banner/banner-quiz.jpg" height="100%" width="100%"></div>
                        <div class="mint-swipe-item" style="transform: translate3d(-414px, 0px, 0px);"><img src="http://image.comingcard.com/banner/banner3.jpg?v=1" height="100%" width="100%"></div>
                    </div>
                    <div class="mint-swipe-indicators">
                        <div class="mint-swipe-indicator"></div>
                        <div class="mint-swipe-indicator is-active"></div>
                        <div class="mint-swipe-indicator"></div>
                    </div>
                </div>
                <div id="scroll-screen"></div>
            </div>
            <div class="m-caiType">
                <!-- 选中的类 z-active -->
                <div class="caiType-info " v-for="(game,index) in gemetype" v-bind:class="{'z-active':game.checked}" @click="game_active(index)">
                    <div class="name"><span class="text">{{ game.title}}</span> <span class="num">{{game.ps}}</span></div>
                    <div class="time">
                        {{game.time}}
                    </div>
                </div>
                <!-- <div class="caiType-info z-active " >
                    <div class="name"><span class="text">时时猜</span> <span class="num">10分钟一期</span></div>
                    <div class="time">
                        10:00 - 02:00(次日)
                    </div>
                </div> -->
            </div>
            <div class="m-index-period">
                <div class="num">本期: 852859</div>
                <div class="time-tip"><img src="/Public/wjy/images/time_new_icon.png"> <span> {{ game_attribute.msg }}</span></div>
            </div>
            <div class="guess">
                <div class="buyContent">
                    <div class="goods-img"><img src="/Public/wjy/images/web/index-01.png"></div>
                    <div class="text">
                        <div class="goodsname">双人竞猜赢金豆</div>
                        <div class="txt">竞猜获胜可获得100金豆</div>
                        <div class="foot">
                            <div class="price"><img src="/Public/wjy/images/web/index-03.png"> 55
                                <span class="buyPrice">金豆</span></div>
                            <div class="buyBtn z-active" @click="buy(1)">
                                竞猜
                            </div>
                        </div>
                    </div>
                </div>
                <div class="buyContent">
                    <div class="goods-img"><img src="/Public/wjy/images/web/index-02.png"></div>
                    <div class="text">
                        <div class="goodsname">双人竞猜赢金豆</div>
                        <div class="txt">竞猜获胜可获得50金豆</div>
                        <div class="foot">
                            <div class="price"><img src="/Public/wjy/images/web/index-03.png"> 28
                                <span class="buyPrice">金豆</span></div>
                            <div class="buyBtn z-active" @click="buy(2)">
                                竞猜
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="lingjiang">
                <div class="Img"><img src="/Public/wjy/images/lingjiang.png"></div> <span>兑奖商品</span></div>
            <div class="srcollTxt">
                <div class="srcollContent">
                   <div class="ling-item" v-for=" (item,index) in duijianglist ">
                        <div class="Img"><img v-bind:src="item.src1" ></div>
                        <div class="foot"><img v-bind:src="item.src2" > <span>{{item.title}}</span></div>
                        <div class="Button" @click="duihuan(index)">
                            兑奖
                        </div>
                    </div>

                </div>
            </div>
            <div class="dynamic">
                <div class="left"><img src="/Public/wjy/images/zuixinStatus.png"> <span>最新动态</span></div>
                <a href="javascript:void(0)" class="right">查看更多&gt;&gt;</a>
            </div>

            <div class="dynamicList">
                <div class="list-item" v-for=" vo in dynamiclist ">
                    <div class="left"><img  v-bind:src="vo.src1"> <span class="nikeName">{{ vo.name }}</span></div>
                    <div class="right"><span class="numTxt">竞猜投入{{vo.price}}金豆</span></div>
                </div>
            </div>

            <div class="guide-wrapper">
                <div></div>
                <div class="guide-content" style="display: none;"></div>
            </div>
            <div id="common-footer" style="display: block;">
				<div class="m-footer">
					<a class="footer-item z-active">
						<!---->
						<div class="footer-icon"><img src="/Public/wjy/images/web/bottom-h-01.png"></div>
						<div class="footer-text">首页</div>
					</a>
					<a class="footer-item">
						<!---->
						<div class="footer-icon"><img src="/Public/wjy/images/web/bottom-02.png"></div>
						<div class="footer-text">排行</div>
					</a>
					<a class="footer-item">
						<!---->
						<div class="footer-icon"><img src="/Public/wjy/images/web/bottom-03.png"></div>
						<div class="footer-text">助手</div>
					</a>
					<a class="footer-item">
						<!---->
						<div class="footer-icon"><img src="/Public/wjy/images/web/bottom-04.png"></div>
						<div class="footer-text">我的</div>
					</a>
				</div>
			</div>
    	</div>
  </div>

</template>

<script>
import jquery from 'jquery'
export default {
  data () {
    return {
      duijianglist:{},
      dynamiclist:{},
      gemetype:{},
      buyinfo:{
          'title':'快乐猜'
      },
      game_attribute:{
          'msg':'',
          'time':'260000',
          'typr':false
      },
      noticeTip:'',


    }
  },
    mounted() {
        this.getduijiang(); // 获取兑奖列表
        this.new_dynamic(); //获取最新的交易状态
        this.get_game_type(); //获取游戏的类型
        this.startTimer(); //当前期 剩余的时间
        this.notic_list(); //广播
    },

   methods: {
        getduijiang () {
           var that = this;
            jquery.ajax({
                url: "/Main/Index/duijianglist",
                type: 'POST',
                dataType: 'json',
                success:function(data){
                    that.duijianglist= data;
                }
            })
        },
        new_dynamic:function(){
            var _this = this;
            jquery.ajax({
                url: "/main/Index/getdynamic",
                type: 'POST',
                dataType: 'json',
                success:function(data){
                    _this.dynamiclist= data;
                }
            })
        },
        get_game_type:function(){
            var _this = this;
           jquery.ajax({
                url: "/main/Index/gemeType",
                type: 'POST',
                dataType: 'json',
                success:function(data){
                    data[0].checked = true;
                    _this.gemetype= data;
                }
            })
        },
        game_active:function(index){   //游戏商品的选中事件
            var _this = this;
            if( index == 1 ){
                _this.buyinfo.title = '时时猜';
            }
            _this.gemetype.forEach(function(item,i){
                if( index == i ){
                    item.checked = true;

                }else{
                   item.checked = false;
                }
            });
        },
        buy:function(type){
            var str = this.buyinfo.title+'55金豆';
            if(type == 2){
                str = this.buyinfo.title+'28金豆';
            }
            alert("你购买的是"+str);
        },
        duihuan:function( index ){
            alert(index);
        },
        updatetime:function(){     //更新时间
            var _this = this;
            if( _this.game_attribute.time <= 0 ){
                clearInterval(_this.Interval);
            }else{
                _this.game_attribute.time -= 10;
                _this.game_attribute.msg = _this.overTime( _this.game_attribute.time );
            }
        },
        startTimer:function(){  //定时器 每隔10毫秒调用一次
            var _this = this;
            _this.Interval = setInterval(this.updatetime,10);

        },
        overTime: function (time) {     //将时间格式化
            var a = (time % 1000).toString().substr(0, 2);
            var b = Math.floor(time / 1000);
            var m = b % 60;
            m = String(m);
            m = m.length >= 2 ? m : "0" + m;
            var f = Math.floor(time / (1000 * 60));
            f = String(f);
            f = f.length >= 2 ? f : '0' + f;
            return f + ':' + m + '.' + a;
        },
        notic_list:function(){
            var _this = this;
            jquery.ajax({
                url: "/main/Index/notic",
                type: 'POST',
                dataType: 'json',
                success:function(data){
                    var payloadList = data;
                    if (payloadList.length == 0) {
                        return;
                    }
                    payloadList.forEach(function (item, index) {
                        _this.noticeTip += item;
                        setTimeout(function () {
                            jquery("#notice-text-content-id").append("<li style='list-style: none;display: inline-block'>" + item + "&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp" + "</li>");
                        }, 1);
                    });

                    setTimeout(function () {
                        if (payloadList.length < 50) {
                            for (var i = 0; i < 7; i++) {
                                payloadList.forEach(function (item, index){
                                    jquery("#notice-text-content-id").append("<li style='list-style: none;display: inline-block'>" + item + "&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp" + "</li>");
                                });
                            }
                        }
                        var mytop = setInterval(function () {
                            var left = parseFloat(jquery(".qimo").css("left"));
                            if (isNaN(left)) {
                                jquery(".qimo").css("left", 0);
                            } else {
                                jquery(".qimo").css("left", left - 1);
                            }
                        }, 18);
                    }, 1000);
                }
            })
        }
        
   }
    


}
</script>
